<script setup lang="ts">
import { onMounted } from 'vue'
import codemirror from 'codemirror'
import 'codemirror/mode/sql/sql'
let myEditor: any;

onMounted(() => {
  const editor: any = document.getElementById('editor')
  myEditor = codemirror(editor, {
    mode: 'sql'
  })
})

const test = () => {
  console.log(myEditor.doc.getValue());
}
</script>

<template>
  <div id="editor" style="border: 1px solid #ededed; height: 200px;"></div>
</template>

<style>
body {
  background-color: #f5f5f5;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>